.q-notifications__list
  z-index: $z-notify
  pointer-events: none
  left: 0
  right: 0
  margin-bottom: 10px
  position: relative

  &--center
    top: 0
    bottom: 0
  &--top
    top: 0
  &--bottom
    bottom: 0

body.q-ios-padding .q-notifications__list
  &--center, &--top
    top: $ios-statusbar-height
    top: env(safe-area-inset-top)
  &--center, &--bottom
    bottom: env(safe-area-inset-bottom)

.q-notification
  box-shadow: $shadow-2
  border-radius: $generic-border-radius
  pointer-events: all
  display: inline-flex
  margin: 10px 10px 0
  transition: transform 1s, opacity 1s
  z-index: $z-notify

  min-width: 300px
  max-width: 95vw

  background: #323232
  color: #fff

  font-size: 14px

  &__icon
    font-size: 24px
    padding-right: 16px

  &__avatar
    font-size: 32px
    padding-right: 8px

  &__message
    padding: 8px 0

  &__actions
    color: #c581ff

  &--standard
    padding: 0 16px
    min-height: 48px

    .q-notification__actions
      padding: 6px 0 6px 8px
      margin-right: -8px

  &--multi-line
    min-height: 68px
    padding: 8px 16px

    .q-notification__actions
      padding: 0

  &--top-left-enter, &--top-left-leave-to,
  &--top-enter, &--top-leave-to,
  &--top-right-enter, &--top-right-leave-to
    opacity: 0
    transform: translateY(-50px)
    z-index: ($z-notify - 1)

  &--left-enter, &--left-leave-to,
  &--center-enter, &--center-leave-to,
  &--right-enter, &--right-leave-to,
  &--bottom-left-enter, &--bottom-left-leave-to,
  &--bottom-enter, &--bottom-leave-to,
  &--bottom-right-enter, &--bottom-right-leave-to
    opacity: 0
    transform: translateY(50px)
    z-index: ($z-notify - 1)

  &--top-left-leave-active,
  &--top-leave-active,
  &--top-right-leave-active,
  &--left-leave-active,
  &--center-leave-active,
  &--right-leave-active,
  &--bottom-left-leave-active,
  &--bottom-leave-active,
  &--bottom-right-leave-active
    position: absolute
    z-index: ($z-notify - 1)
    margin-left: 0
    margin-right: 0

  &--top-leave-active,
  &--center-leave-active
    top: 0

  &--bottom-left-leave-active,
  &--bottom-leave-active,
  &--bottom-right-leave-active
    bottom: 0

@media (min-width: $breakpoint-sm-min)
  .q-notification
    max-width: 65vw
